<template>
  <div style="height:100%">
    <el-container class="home_container">
      <el-header>
        <div class="home_title">百悦茶楼收银系统</div>

        <div class="home_userinfoContainer">
          <el-dropdown @command="handleCommand">
            <span class="el-dropdown-link home_userinfo">
              {{ currentUserName }}
              <i class="el-icon-arrow-down el-icon--right home_userinfo"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="logout"
                                divided>退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <el-menu class="el-menu-vertical-demo"
                   default-active="0"
                   router
                   style="background-color: #ECECEC; text-align: center;">
            <!-- 点击展开收起导航和切换对应图标 -->

            <!-- <div class="box_bgd" @click="isC">
            <i class="el-icon-s-fold" v-show="block"></i>
            <i class="el-icon-s-unfold" v-show="toggle"></i>
          </div> -->

            <template v-for="(item, index) in menu">
              <template v-if="!item.hidden">
                <el-submenu :index="index + ''"
                            :key="index"
                            v-if="item.children.length > 1">
                  <template slot="title">
                    <i :class="item.iconCls"></i>
                    <span>{{ item.name }}</span>
                  </template>
                  <template v-for="child in item.children">
                    <!-- <el-menu-item
                    :index="child.path"
                    :key="child.path"
                    v-if="!child.hidden"
                    ><i :class="item.iconCls"></i>{{ child.name }}</el-menu-item
                  > -->
                    <el-menu-item :index="child.path"
                                  :key="child.path"
                                  v-if="!child.hidden">{{ child.name }}</el-menu-item>
                  </template>
                </el-submenu>

                <template v-else>
                  <el-menu-item :index="item.children[0].path">
                    <i :class="item.iconCls"></i>
                    <span slot="title">{{ item.children[0].name }}</span>
                  </el-menu-item>
                </template>
              </template>
            </template>
          </el-menu>
        </el-aside>
        <el-container>
          <el-main style="height: 100%; width: 100%;">
            <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item class="heard"
                                  :to="{ path: '/home' }">首页</el-breadcrumb-item>
              <el-breadcrumb-item v-text="this.$router.currentRoute.name"></el-breadcrumb-item>
            </el-breadcrumb>
            <el-divider class="divider"></el-divider>
            <!-- 去除页面缓存 -->
            <!-- <keep-alive> -->
            <router-view v-if="this.$route.meta.keepAlive"></router-view>
            <!-- </keep-alive> -->
            <router-view v-if="!this.$route.meta.keepAlive"></router-view>
          </el-main>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>
<script>
export default {
  methods: {
    // 动态控制展开与收起和切换对应图标
    isC() {
      this.isCollapse = !this.isCollapse;
      this.toggle = !this.toggle;
      this.block = !this.block;
    },
    handleCommand(command) {
      var _this = this;
      if (command == 'logout') {
        this.$confirm('注销登录吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(
          function () {
            let res = _this.$api.userApi.userLoginOut();
            if (res) {
              localStorage.removeItem('userInfo');
              localStorage.removeItem('menuInfo');
              _this.currentUserName = '';
              _this.$router.replace({
                path: '/',
              });
            }
          },
          function () {
            //取消
          }
        );
      }
    },
  },

  mounted: async function () {
    this.menu = this.$util.getLocalStorage('menuInfo');
    this.userInfo = this.$util.getLocalStorage('userInfo');

    if (this.userInfo) {
      this.currentUserName = this.userInfo.user;
    }
    if (!this.menu == null || this.menu.length < 1) {
      this.$messageIndex.Notice(
        '权限不足',
        this.userInfo.username + '--您还没有任何权限,请联系管理员添加',
        'warning',
        '0'
      );
    }
    //  getMenuPole();
  },
  data() {
    return {
      isShow: false,
      params: {},
      menu: [],
      userInfo: {},
      currentUserName: '',
      isCollapse: false, //导航栏默认为展开
      toggle: false, //第二个图标默认隐藏
      block: true, //默认显示第一个图标
    };
  },
};
</script>

<style lang="less" scoped>
.home_container {
  height: 100%;
  /* position: absolute; */
  top: 0px;
  left: 0px;
  width: 100%;
}

.el-header {
  background-color: #20a0ff;
  color: #333;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.el-aside {
  background-color: #ececec;
}

.el-main {
  background-color: #fff;
  color: #000;
  /* text-align: center; */
}

.home_title {
  color: #fff;
  font-size: 22px;
  display: inline;
}

.home_userinfo {
  color: #fff;
  cursor: pointer;
}

.home_userinfoContainer {
  display: inline;
  margin-right: 20px;
}
</style>
